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HTML 

import @ 

url(http ://f ont s . googleapis . com/c s s ?f amily =Lato : 300 

;(,400,700 

;'charset 'UTF-8@ 

/* Base Styles */ 

,cssmenu > ul# 

,cssmenu > ul li# 

} cssmenu > ul ul# 

;list-style: none 

;margin: 

;padding: 

{ 

} cssmenu > ul# 
;position: relative 
;z-index: 597 
;float: left 

{ 

} cssmenu > ul li# 



;float: left 
;min-height: lpx 
;line-height: 1.3em 
; vertical-align: middle 
;padding: lOpx 

{ 

,cssmenu > ul li.hover# 
} cssmenu > ul li:hover# 
;z-index: 599 
;cursor: default 

{ 

} cssmenu > ul ul# 
visibility: hidden 
;position: absolute 
;top: 100% 

;left: 
;z-index: 598 

{ 



} cssmenu > ul ul li# 
;float: none 

{ 

cssmenu > ul li:hover > ul# 
visibility: visible 

{ 

Align last drop down RTL */ 
/* Theme Styles */ 
} cssmenu > ul a:link# 
;text-decoration: none 

{ 

} cssmenu > ul a:active# 
;color: #ffa500 

{ 

} cssmenu li# 
;padding: 
;color: #000 

{ 



} cssmenu# 

;font-family: 'Lato', sans-serif 

;width: auto 

;webkit-border-radius: 3px- 

;moz-border-radius: 3px- 

;ms-border-radius: 3px- 

;o-border-radius: 3px- 

;border-radius: 3px 

background: #03778c 

;font-size: 13px 

moz-box-shadow: inset 2px 2px rgba(255, 255, - 

;(255, 0.3 

webkit-box- shadow: inset 2px 2px rgba(255, - 

;(255, 255, 0.3 

box-shadow: inset 2px 2px rgba(255, 255, 255, 

;(0.3 

{ 

} cssmenu > ul# 
;padding: 5px 



moz-box-shadow: inset -2px 2px rgba(0, 0, 0, - 

;(0.3 

webkit-box- shadow: inset -2px 2px rgba(0, 0, 0, 

;(0.3 

;(box-shadow: inset -2px 2px rgba(0, 0, 0, 0.3 
;webkit-border-radius: 3px- 
;moz-border-radius: 3px- 
;ms-border-radius: 3px- 
;o-border-radius: 3px- 
;border-radius: 3px 
;display: block 
;float: none 
;zoom: 1 

{ 

} cssmenu > ul:before# 
;" xontent 
;display: block 

{ 

} cssmenu > ul:after# 



;" xontent 
;display: table 
;clear: both 

{ 

} cssmenu > ul > li# 
;padding: 8px 5px 

{ 

,cssmenu > ul > li > a# 
,cssmenu > ul > li > a:link# 
} cssmenu > ul > li > a:visited# 
;text-shadow: -lpx lpx #000000 
;color: #fff 
;padding: 7px 20px 
;display: block 
;webkit-border-radius: 3px- 
;moz-border-radius: 3px- 
;ms-border-radius: 3px- 
;o-border-radius: 3px- 



;border-radius: 3px 

{ 

,cssmenu > ul > li > a:hover# 
} cssmenu > ul > li:hover > a# 
;background-color: #024d5a 

{ 

} cssmenu li li a# 
;color: #03778c 
;font-size: 13px 

{ 

} cssmenu li li a:hover# 

;color: #000000 
;border-color: #000000 

{ 

} cssmenu ul ul# 
;margin: lOpx 
;padding: lOpx 
;float: none 



background: #ffffff 
;border: 2px solid #03778c 
;border-top: none 
;right: 
;left: 

;webkit-border-radius: 3px 3px- 
;moz-border-radius: 3px 3px- 
;ms-border-radius: 3px 3px- 
;o-border-radius: 3px 3px- 
;border-radius: 3px 3px 
;(moz-box-shadow: 2px 3px rgba(0, 0, 0, 0.2- 
;(webkit-box- shadow: 2px 3px rgba(0, 0, 0, 0.2- 
;(box-shadow: 2px 3px rgba(0, 0, 0, 0.2 

{ 

} cssmenu ul > li > ul > li# 
;margin: lOpx 
;position: relative 
;padding: 



;float: left 

{ 

} cssmenu ul > li > ul > li > a# 
;padding: lOpx 20px lOpx lOpx 
;display: block 

{ 

} cssmenu ul > li > ul > li.has-sub > a:before# 

;" :content 
;position: absolute 
;top: 18px 
;right: 6px 
;border: 5px solid transparent 
;border-top: 5px solid #03778c 

{ 

} cssmenu ul > li > ul > li.has-sub > a:hover:before# 
;border-top: 5px solid #000000 

{ 

} cssmenu ul ul ul# 



;width: 200px 
;top: 100% 
;border: 2px solid #03778c 

{ 

} cssmenu ul ul ul li# 
;float: none 

{ 

CSS 

<'div id='cssmenu> 
<ul> 

li class='active'xa > 
<href='index.htmr><span>Home</spanx/a></li 

li class='has-sub'xa > 
<href='#'xspan>Products</spanx/a 

<ul> 

li class='has-sub'xa href='#'xspan>Product > 

<l</spanx/a 



<ul> 

lixa href='#'xspan>Sub > 
<Item</spanx/ax/li 

li class='last'xa href='#'xspan>Sub > 

<Item</spanx/ax/li 

<ul/> 

<li/> 

li class='has-sub'xa href='#'xspan>Product > 

<2</spanx/a 

<ul> 

lixa href='#'xspan>Sub > 
<Item</spanx/ax/li 

li class='last'xa href='#'xspan>Sub > 

<Item</spanx/ax/li 

<ul/> 

<li/> 

<ul/> 

<li/> 



<lixa href='#'xspan>About</spanx/ax/li> 



li class='last'xa > 
<href='#'xspan>Contact</span></a></li 

<ul/> 

<div/> 



